<template>
    <div class="app-container">
        <!-- 培训机构schoolType=='1' 没有年级 只有班级 -->
        <!-- 普通学校schoolType=='0' 有年级 有班级 -->
        <levelbar></levelbar>
        <TableLayout form-title="">
        <div slot="form-title" class="table-title"></div>
            <el-form :model="query" class="formInline" :rules="rules" ref="query" label-width="90px"  slot="form">          
                <el-row :gutter="41">
                    <el-col :span="8" v-if="schoolType == '0'"> 
                        <el-form-item label="年级" >
                            <grade v-model="query.gradeId"
                            :isDefaultFill='false' 
                            @defaultFillGrade='defaultFillGrade'></grade>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班级" >
                            <getClass v-model="query.classId" 
                            :isDefaultFill='isDefaultFillClass' 
                             @defaultFillClass='defaultFillClass'
                            :grade='query.gradeId'
                            ></getClass>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="学生姓名">
                            <el-input v-model="query.stuName" :maxlength="12" placeholder="请输入学生姓名" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>                   
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="通话形式">
                            <el-select v-model="query.talkType" placeholder="请选择" style="width:100%;">
                                <el-option v-for="item in talkList" :key="item.talkId" :label="item.talkDesc" :value="item.talkId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16"> 
                        <el-button style="float:right" type="primary" @click="onSubmit('query')">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title">
            </div>
            <el-table :data="queryData" style="width: 100%" border  v-loading="loading" ref="multipleTable">
                <el-table-column label="呼叫时间" align="center" min-width="110">
                    <template scope = "scope">
                        {{scope.row.contactTime.substring(0,16) || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="学生姓名" align="center">
                    <template scope = "scope">
                        {{scope.row.name || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="e学云ID号" align="center">
                    <template scope = "scope">
                        {{scope.row.exueCode || '--'}}
                    </template>
                </el-table-column>

                <el-table-column label="呼叫家长" align="center" >
                     <template scope = "scope">
                        {{scope.row.parent || '--'}}
                    </template>
                </el-table-column>

                <el-table-column label="通话时长" align="center">
                    <template scope = "scope">
                        {{scope.row.voiceLength +'s'|| '--'}}
                    </template>
                </el-table-column>

                <el-table-column label="通话形式" align="center" prop="type"  >
                    <template scope = "scope">
                        {{scope.row.voiceType || '--'}}
                    </template>
                </el-table-column>

                <el-table-column label="年级" align="center">
                     <template scope = "scope">
                        {{scope.row.gradeId || '--'}}
                    </template>
                </el-table-column>

                <el-table-column label="班级" align="center">
                     <template scope = "scope">
                        {{scope.row.classId || '--'}}
                    </template>
                </el-table-column>

            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import grade from 'components/SchoolClasss/grade';
import getClass from 'components/SchoolClasss/class1';
import { pageContactPerson} from 'api/wisdom';
import { mapGetters, mapState, mapActions } from 'vuex';

export default {
    name: 'homeSchooling',
    components: { Levelbar, TableLayout, grade, getClass },
    data() {
        return {
            isDefaultFillClass: false, // 是否默认填充班级
            loading: true,
            gradeList: [],
            classList: [],
            talkList: [
                {
                    talkId: '',
                    talkDesc: '请选择'
                },
                {
                    talkId: '0',
                    talkDesc: '语音'
                },
                {
                    talkId: '1',
                    talkDesc: '视频'
                }
            ],
            query: {
                gradeId: '',
                classId: '',
                stuName: '',
                talkType: ''
            },
            queryData: [],
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            rules: {
                // grade: [
                //     {required: true, message: '请选择年级', trigger: 'blur'}
                // ],
                // classId: [
                //     {required: true, message: '请选择班级', trigger: 'blur'}
                // ]
            }
        }
    },
    created() {
        this.searchFetchData();// 查询列表
    },
    computed: {
        ...mapGetters([
            'uid',
            'schoolId',
            'schoolName',
            'schoolType',
            'roleType'
        ]),
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated // 局部刷新列表
        })
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        searchFetchData() {
            this.loading=true;
            let json={
                page: this.listQuery.page,
                rows: this.config.pageSize,
                schoolId: this.schoolId,
                gradeId: this.query.gradeId,
                classId: this.query.classId,
                name: this.query.stuName, // 学生姓名
                voiceType: this.query.talkType // 通话类型
            };
            pageContactPerson(json).then(res => {
                this.loading = false;
                this.queryData = res.data.content.list;
                this.listQuery.total = res.data.content.pagination.total;
            }).catch(() => {
                this.loading = false;
            })
            
        },

        onSubmit(query) {
            this.searchFetchData();
        },

        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {            
            this.listQuery.page = val;
            this.searchFetchData();
        },
        defaultFillGrade(gradeId) {
            this.query.gradeId=gradeId;
        },
        defaultFillClass(classId) {
            this.query.classId=classId;
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
}
</style>